尺寸（Sizing） · Bootstrap v5 中文文档 v5.3

2024-07-10 14:01| 来源: 网络整理| 查看: 265

View on GitHub 尺寸（Sizing）

利用宽度（width）和高度（height）相关的工具类来轻松实现对页面元素的高度和宽度的设定。

On this page 相对于父元素的尺寸

宽度（Width）和高度（height）工具类是通过 _utilities.scss 文件中的工具类 API 生成的。默认情况下支持 25%、50%、75%、100% 和 auto 值。根据你的需要修改这些值，就可以生成不同的工具类。

25% 的宽度 50% 的宽度 75% 的宽度 100% 的宽度宽度自使用 html 25% 的宽度 50% 的宽度 75% 的宽度 100% 的宽度宽度自使用 Height 25% Height 50% Height 75% Height 100% Height auto html Height 25% Height 50% Height 75% Height 100% Height auto

如果需要，你也可以使用 max-width: 100%; 和 max-height: 100%; 工具类

PlaceholderMax-width 100% html Max-height 100% html Max-height 100% 相对于视口（viewport）的尺寸

你还可以使用工具类来设置相对于视口（viewport）的宽度和高度。

Min-width 100vw Min-height 100vh Width 100vw Height 100vh Sass 工具类 API

在工具类 API 中定义了与尺寸相关的工具类，位于 scss/_utilities.scss 文件中。了解如何使用工具类 API。

"width": ( property: width, class: w, values: ( 25: 25%, 50: 50%, 75: 75%, 100: 100%, auto: auto ) ), "max-width": ( property: max-width, class: mw, values: (100: 100%) ), "viewport-width": ( property: width, class: vw, values: (100: 100vw) ), "min-viewport-width": ( property: min-width, class: min-vw, values: (100: 100vw) ), "height": ( property: height, class: h, values: ( 25: 25%, 50: 50%, 75: 75%, 100: 100%, auto: auto ) ), "max-height": ( property: max-height, class: mh, values: (100: 100%) ), "viewport-height": ( property: height, class: vh, values: (100: 100vh) ), "min-viewport-height": ( property: min-height, class: min-vh, values: (100: 100vh) ),

【本文地址】

公司简介

联系我们